<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>个人信息</title>
		<link rel="stylesheet" href="../../css/simple-line-icons.css">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../../css/mui.picker.css" />
		<link rel="stylesheet" href="../../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../../css/mui-ext.css">
		<style>
			body,
			.mui-content {
				background-color: #fff;
			}
			
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 0px;
			}
			
			.mui-input-group label {
				width: 36%;
				line-height: 1;
				padding-top: 15px;
				padding-left: 5px;
				padding-right: 5px;
				color: #666;
			}
			
			.mui-input-group {
				line-height: 1;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 60%;
				line-height: 1;
				padding-top: 0.4rem;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
				text-align: center;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
			
			.mui-content {
				height: 100%;
				background-image: url(../../img/grzx/bg_logo_02.png);
				background-position: center center;
				background-repeat: no-repeat;
			}
			
			.login-logo {
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			
			.login-title {
				padding-top: 30px;
				padding-bottom: 10px;
				color: #00a8c6;
			}
			
			#member-form {
				padding-top: 0px;
				padding-bottom: 20px;
				padding-left: 0.5rem;
				padding-right: 0.5rem;
			}
			
			#login {
				width: 70%;
				line-height: 2;
			}
			
			#member {
				width: 30%;
				line-height: 2;
			}
			
			#check-code-btn {
				width: 100px;
				color: #666;
			}
			
			.mui-input-group:before,
			.mui-input-group:after {
				height: 0px;
			}
			
			.link-area a {
				color: #bfbfbf;
			}
			
			.input-icon {
				margin-left: 10px;
			}
			
			.member-title-bar {
				height: 36px;
				line-height: 20px;
				text-align: left;
			}
			
			.member-title-bg {
				background-color: #e9edef;
			}
			
			.member-title {
				height: 32px;
				background-color: #e9edef;
				padding-left: 20px;
				line-height: 32px;
			}
			
			.mui-input-row select {
				font-size: 14px;
			}
			
			.itemDay,
			itemAddr,
			itemGrade,
			itemTeacher {
				background-color: #fff;
			}
		</style>

	</head>

	<body>
		<div class="mui-content">
			<div class="login-logo">
				<h2 class="login-title">会员信息 </h2>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-1"></div>
				<div class="mui-col-xs-10">
					<form class="mui-input-group" id="member-form">
						<input type="hidden" name="itemId" value="${user.itemId}">
						<button type="button" class="mui-btn mui-btn-warning mui-btn-block member-title-bar">添加孩子信息※</button>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-collapse mui-active">
								<a class="mui-navigate-right  member-title-bg" href="#">大宝信息</a>
								<div class="mui-collapse-content">
									<div class="mui-input-row">
										<label>名字</label>
										<input id='name' name="itemName" type="text" class="mui-input-clear mui-input" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>性别</label>
										<select id='gender' name="itemSex" class="" placeholder="">
											<option value="0">男</option>
											<option value="1">女</option>
										</select>
									</div>
									<div class="mui-input-row">
										<label>生日</label>
										<input name="itemDay" type="text" data-options='{"type":"date","beginYear":1980,"endYear":2030}' class="mui-input-clear mui-input itemDay" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>学校</label>
										<input name="itemAddr" type="text" class="mui-input-clear mui-input itemAddr" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>班级</span></label>
										<input name="itemChar15" type="text" class="mui-input-clear mui-input itemGrade" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>班主任</label>
										<input name="itemChar16" type="text" class="mui-input-clear mui-input itemTeacher" placeholder="">
									</div>
							</li>
						</ul>

						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-collapse">
								<a class="mui-navigate-right  member-title-bg" href="#">二宝信息</a>
								<div class="mui-collapse-content">
									<div class="mui-input-row">
										<label>名字</label>
										<input name="itemChar21" type="text" class="mui-input-clear mui-input" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>性别</label>
										<select name="itemChar22" class="" placeholder="">
											<option value="1">男</option>
											<option value="2">女</option>
										</select>
									</div>
									<div class="mui-input-row">
										<label>生日</label>
										<input name="itemChar23" type="text" data-options='{"type":"date","beginYear":1980,"endYear":2030}' class="mui-input-clear mui-input itemDay" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>学校</label>
										<input name="itemChar24" type="text" class="mui-input-clear mui-input itemAddr" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>班级</span></label>
										<input name="itemChar25" type="text" class="mui-input-clear mui-input itemGrade" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>班主任</label>
										<input name="itemChar26" type="text" class="mui-input-clear mui-input itemTeacher" placeholder="">
									</div>
								</div>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-collapse">
								<a class="mui-navigate-right  member-title-bg" href="#">三宝信息</a>
								<div class="mui-collapse-content">
									<div class="mui-input-row">
										<label>名字</label>
										<input name="itemChar31" type="text" class="mui-input-clear mui-input" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>性别</label>
										<select name="itemChar32" class="" placeholder="">
											<option value="1">男</option>
											<option value="2">女</option>
										</select>
									</div>
									<div class="mui-input-row">
										<label>生日</label>
										<input name="itemChar33" type="text" data-options='{"type":"date","beginYear":1980,"endYear":2030}' class="mui-input-clear mui-input itemDay" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>学校</label>
										<input name="itemChar34" type="text" class="mui-input-clear mui-input itemAddr" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>班级</span></label>
										<input name="itemChar35" type="text" class="mui-input-clear mui-input itemGrade" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>班主任</label>
										<input name="itemChar36" type="text" class="mui-input-clear mui-input itemTeacher" placeholder="">
									</div>
								</div>
							</li>
						</ul>

						<button type="button" class="mui-btn mui-btn-warning mui-btn-block member-title-bar">添加家长信息</button>
						<ul class="mui-table-view" onclick="javascript:void(0);">
							<li class="mui-table-view-cell mui-collapse mui-active" onclick="return false;">
								<div class="mui-navigate-right1  member-title-bg" onclick="return false;">家长信息※</div>
								<div class="mui-collapse-content" style="padding: 0px;">
									<div class="mui-input-row">
										<label>我是孩子的</label>
										<select name="itemChar51" class="" placeholder="">
											<option value="1">父亲</option>
											<option value="2">母亲</option>
										</select>
									</div>
									<div class="mui-input-row">
										<label>姓名</label>
										<input name="itemChar52" type="text" class="mui-input-clear mui-input" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>职业</label>
										<input name="itemChar53" type="text" class="mui-input-clear mui-input" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>年龄</span></label>
										<input name="itemChar54" type="text" class="mui-input-clear mui-input" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>教育程度</label>
										<input name="itemChar55" type="text" class="mui-input-clear mui-input" placeholder="">
									</div>
									<div class="mui-input-row">
										<label>家庭年收入</label>
										<input name="itemChar56" type="text" class="mui-input-clear mui-input" placeholder="">
									</div>
							</li>
						</ul>
						<h6>(带※号为必搷资料)</h6>
					</form>
					</div>
					<div class="mui-col-xs-1"></div>
					</div>
					<div class="mui-content-padded">
						<button id='member' type="button" class="btn btn-circle mui-btn-default">确定</button>
						<div class="link-area">
							<a id='customerService'>联系在线客服</a>
						</div>
					</div>
				</div>
				</footer>
	</body>
	<!-- JS FILES -->
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.picker.min.js"></script>
	<script src="../../js/jquery-1.8.3.min.js"></script>
	<script>
		(function($, doc) {
			$.init({
				statusBarBackground: '#f7f7f7'
			});
		}(mui, document));
	</script>

</html>